
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>彩虹加载猪🌈</title>
  <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Press+Start+2P"
  />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      font: 0.9em 'Press Start 2P';
      text-transform: uppercase;
      color: #ffffff;
      background: #0a0916
      radial-gradient(circle at center, #151333 0%, #0a0916 80%) no-repeat;
    }

    a {
      color: #25364c;
      text-decoration: none;
    }
    a:hover {
      color: #ffffff;
    }

    .settings {
      position: absolute;
      z-index: 2;
      top: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .settings li {
      list-style-type: none;
    }
    .settings button {
      max-width: 200px;
      padding: 5px 0;
      font: inherit;
      font-size: clamp(12px, 3vw, 16px);
      color: #ffffff;
      text-transform: uppercase;
      text-overflow: ellipsis;
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
      border: none;
      transform-origin: right center;
      background: none;
    }
    .settings button[data-skin='nyan'].active {
      color: #f66b79;
    }
    .settings button[data-skin='devil'].active {
      color: #ae1f2d;
    }
    .settings button[data-skin='alien'].active {
      color: #319e47;
    }
    .settings button[data-skin='baguette'].active {
      color: #fedea2;
    }
    .settings button.state-button {
      margin-top: 20px;
    }
    .settings button.state-button.active {
      color: #13b225;
      text-decoration: none;
    }
    .settings button:hover {
      cursor: pointer;
      transform: scale(1.2);
    }
    @media screen and (max-height: 500px) and (max-width: 750px) {
      .settings {
        display: none;
        flex-direction: row;
        gap: 10px;
      }
      .settings button:hover:not(.active) {
        transform: translateY(-2px);
      }
    }

    .loader-container {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
    .loader-container .loader-state {
      width: 100%;
    }
    .loader-container .loader-state + .loader-text {
      display: block;
      user-select: none;
      opacity: 0;
      transform: translate(10px, calc(20px * 1.5));
      animation: loader-text-blink 0.4s ease-in-out infinite alternate;
    }
    @keyframes loader-text-blink {
      to {
        opacity: 1;
      }
    }
    @media screen and (max-height: 350px) {
      .loader-container .loader-state + .loader-text {
        display: none;
      }
    }
    .loader-container .loader-state.enter-exit {
      animation: appear 8s ease-in-out infinite forwards;
    }
    @keyframes appear {
      0% {
        opacity: 0;
        transform: translate(-600px, 20px);
      }
      5%,
      93% {
        opacity: 0;
      }
      10% {
        transform: translate(50px, 20px);
      }
      15% {
        transform: translate(-50px, 20px);
      }
      20%,
      90% {
        opacity: 1;
        transform: translate(0, 20px);
      }
      100% {
        opacity: 0;
        transform: translate(600px, 20px);
      }
    }
    .loader-container .loader-state.enter-exit + .loader-text {
      animation: loader-text-blink2 8s ease-in-out infinite forwards;
    }
    @keyframes loader-text-blink2 {
      0%,
      5%,
      15%,
      25%,
      35%,
      45%,
      55%,
      65%,
      75%,
      85%,
      93%,
      100% {
        opacity: 0;
      }
      10%,
      20%,
      30%,
      40%,
      50%,
      60%,
      70%,
      80%,
      90% {
        opacity: 1;
      }
    }

    svg {
      --flying-speed: 0.4s;
      width: 100%;
      max-width: 400px;
      -webkit-mask-image: linear-gradient(
              to left,
              #0a0916 65%,
              transparent 85%
      );
      mask-image: linear-gradient(to left, #0a0916 65%, transparent 85%);
      animation: moves-like-jagger 0.4s ease-in-out infinite alternate;
    }
    @keyframes moves-like-jagger {
      to {
        transform: translateY(20px);
      }
    }

    .rainbow rect {
      width: 5px;
      height: 6px;
      stroke: transparent;
      fill: url(#rainbow-colors);
    }
    .rainbow rect:nth-child(1) {
      transform: translate(25px, 8.4px);
      animation: over-the-rainbow-1 0.4s ease-in-out 0.0666666667s infinite
      alternate;
    }
    @keyframes over-the-rainbow-1 {
      to {
        transform: translate(25px, 9.0666666667px);
      }
    }
    .rainbow rect:nth-child(2) {
      transform: translate(20.2px, 8.3px);
      animation: over-the-rainbow-2 0.4s ease-in-out 0.1333333333s infinite
      alternate;
    }
    @keyframes over-the-rainbow-2 {
      to {
        transform: translate(20.2px, 9.6333333333px);
      }
    }
    .rainbow rect:nth-child(3) {
      transform: translate(15.4px, 8.2px);
      animation: over-the-rainbow-3 0.4s ease-in-out 0.2s infinite alternate;
    }
    @keyframes over-the-rainbow-3 {
      to {
        transform: translate(15.4px, 10.2px);
      }
    }
    .rainbow rect:nth-child(4) {
      transform: translate(10.6px, 8.1px);
      animation: over-the-rainbow-4 0.4s ease-in-out 0.2666666667s infinite
      alternate;
    }
    @keyframes over-the-rainbow-4 {
      to {
        transform: translate(10.6px, 10.7666666667px);
      }
    }
    .rainbow rect:nth-child(5) {
      transform: translate(5.8px, 8px);
      animation: over-the-rainbow-5 0.4s ease-in-out 0.3333333333s infinite
      alternate;
    }
    @keyframes over-the-rainbow-5 {
      to {
        transform: translate(5.8px, 11.3333333333px);
      }
    }
    .rainbow rect:nth-child(6) {
      transform: translate(1px, 7.9px);
      animation: over-the-rainbow-6 0.4s ease-in-out 0.4s infinite alternate;
    }
    @keyframes over-the-rainbow-6 {
      to {
        transform: translate(1px, 11.9px);
      }
    }

    .nyan .rainbow-color1 {
      stop-color: #e12523;
    }

    .nyan .rainbow-color2 {
      stop-color: #dc8d30;
    }

    .nyan .rainbow-color3 {
      stop-color: #deeb44;
    }

    .nyan .rainbow-color4 {
      stop-color: #01eb3e;
    }

    .nyan .rainbow-color5 {
      stop-color: #138fe9;
    }

    .nyan .rainbow-color6 {
      stop-color: #7127ee;
    }

    .devil .rainbow-color1 {
      stop-color: #d71440;
    }

    .devil .rainbow-color2 {
      stop-color: #ff6c40;
    }

    .devil .rainbow-color3 {
      stop-color: #ffce21;
    }

    .devil .rainbow-color4 {
      stop-color: #ffce21;
    }

    .devil .rainbow-color5 {
      stop-color: #ff6c40;
    }

    .devil .rainbow-color6 {
      stop-color: #d71440;
    }

    .alien .rainbow-color1 {
      stop-color: #12a921;
    }

    .alien .rainbow-color2 {
      stop-color: #0fce22;
    }

    .alien .rainbow-color3 {
      stop-color: #0fef25;
    }

    .alien .rainbow-color4 {
      stop-color: #0fef25;
    }

    .alien .rainbow-color5 {
      stop-color: #0fce22;
    }

    .alien .rainbow-color6 {
      stop-color: #12a921;
    }

    .baguette .rainbow-color1 {
      stop-color: #2465de;
    }

    .baguette .rainbow-color2 {
      stop-color: #2465de;
    }

    .baguette .rainbow-color3 {
      stop-color: #ffffff;
    }

    .baguette .rainbow-color4 {
      stop-color: #ffffff;
    }

    .baguette .rainbow-color5 {
      stop-color: #f1200d;
    }

    .baguette .rainbow-color6 {
      stop-color: #f1200d;
    }

    svg.nyan {
      --body1: #f19183;
      --body2: #fcd8d7;
      --stains: #fac4b8;
      --eyes: #0c0b0b;
      --ears: #f19183;
      --snout1: #f79197;
      --snout2: #f66b79;
      --snout-holes: #e73b36;
    }

    svg.devil {
      --body1: #410a07;
      --body2: #bb1626;
      --stains: #790813;
      --eyes: #f0d459;
      --ears: #2b1d05;
      --snout1: #db2839;
      --snout2: #ae1f2d;
      --snout-holes: #900f0b;
    }

    svg.alien {
      --body1: #116423;
      --body2: #15a031;
      --stains: #0f8b27;
      --eyes: #ffffff;
      --ears: #3dbc56;
      --snout1: #3dbc56;
      --snout2: #319e47;
      --snout-holes: #196e2a;
    }

    svg.baguette {
      --body1: #f89f39;
      --body2: #fdb85a;
      --stains: #fedda7;
      --eyes: #0c0b0b;
      --ears: #dc790f;
      --snout1: #ffdea1;
      --snout2: #fedea2;
      --snout-holes: #f98d0e;
    }

    .pig {
      position: relative;
      transform: translate(-29px);
    }
    .pig .body2 {
      fill: var(--body2);
    }
    .pig:hover {
      cursor: pointer;
    }

    .pig .body1,
    .tail rect,
    .foot rect {
      fill: var(--body1);
    }

    .stains {
      fill: var(--stains);
    }

    .snout {
      stroke: transparent;
      transform: translate(52px);
      animation: sniff-sniff 2s ease-in-out infinite;
    }
    .snout .snout1 {
      fill: var(--snout1);
    }
    .snout .snout2 {
      fill: var(--snout2);
    }
    .snout .snout-holes {
      fill: var(--snout-holes);
    }
    @keyframes sniff-sniff {
      5%,
      15%,
      25% {
        transform: translate(52px);
      }
      10%,
      20% {
        transform: translate(52.5px);
      }
    }

    .tail {
      transform: translate(52.25px);
      transform-origin: center;
    }
    .tail rect:nth-child(2) {
      transform: translate(3.25px, 10.5px);
      animation: fairy-tail 0.4s ease-in-out infinite alternate;
    }
    @keyframes fairy-tail {
      to {
        transform: translate(3.25px, 10px);
      }
    }

    .foot {
      transform: translate(52px);
      animation: hypnotic-feet 0.4s ease-in-out infinite alternate;
    }
    @keyframes hypnotic-feet {
      to {
        transform: translate(52.5px);
      }
    }

    .ears rect {
      fill: var(--ears);
    }

    .eyes {
      transform: translate(52px);
    }
    .eyes rect {
      fill: var(--eyes);
      animation: blinky-blinky 2s step-start infinite;
    }
    @keyframes blinky-blinky {
      5% {
        opacity: 1;
      }
      10% {
        opacity: 0;
      }
    }

    .heart {
      animation: sweet-heart 0.6s ease-out;
      transform: translate(33px, 4px);
    }
    @keyframes sweet-heart {
      to {
        transform: translate(33px, 0px);
      }
    }

    .background-container {
      position: absolute;
      z-index: -1;
      width: 100%;
      max-width: 800px;
      height: 50%;
      opacity: 0.8;
      overflow: hidden;
      -webkit-mask-image: radial-gradient(
              circle,
              #151333 0%,
              transparent 80%
      );
      mask-image: radial-gradient(circle, #151333 0%, transparent 80%);
    }
    .background-container .stars {
      background: url('https://cdn.discordapp.com/attachments/997025307255119955/1004483049406353568/stars_background.svg');
      width: 1740px;
      height: 100%;
      animation: through-the-stars 1.2s infinite linear;
    }
    @keyframes through-the-stars {
      to {
        transform: translateX(-50%);
      }
    }

    footer {
      text-align: center;
      margin: auto auto 5vh auto;
      padding: 0 5vw;
      font-size: 0.6em;
    }
    @media screen and (max-height: 350px) {
      footer {
        display: none;
      }
    }
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<main class="loader-container">
  <div class="loader-state">
    <svg
            class="nyan"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 47 20"
    >
      <defs>
        <linearGradient id="rainbow-colors" x1="0.5" x2="0.5" y2="1">
          <stop class="rainbow-color1" offset="0" />
          <stop class="rainbow-color1" offset="0.167" />
          <stop class="rainbow-color2" offset="0.167" />
          <stop class="rainbow-color2" offset="0.335" />
          <stop class="rainbow-color3" offset="0.335" />
          <stop class="rainbow-color3" offset="0.5" />
          <stop class="rainbow-color4" offset="0.5" />
          <stop class="rainbow-color4" offset="0.669" />
          <stop class="rainbow-color5" offset="0.669" />
          <stop class="rainbow-color5" offset="0.833" />
          <stop class="rainbow-color6" offset="0.833" />
          <stop class="rainbow-color6" offset="1" />
        </linearGradient>
      </defs>
      <g class="rainbow">
        <rect />
        <rect />
        <rect />
        <rect />
        <rect />
        <rect />
      </g>
      <g class="pig">
        <g class="foot" transform="translate(52)">
          <rect width="1" height="3" transform="translate(6 13)" />
          <rect width="1" height="3" transform="translate(8 13)" />
          <rect width="1" height="3" transform="translate(14 13)" />
          <rect width="1" height="3" transform="translate(12 13)" />
        </g>
        <g class="tail">
          <rect width="1" height="1" transform="translate(4 10)" />
          <rect width="1" height="1" transform="translate(3 11)" />
        </g>

        <g transform="translate(52)">
          <rect
                  class="body1"
                  width="8"
                  height="8"
                  transform="translate(7 6)"
          />
          <rect
                  class="body1"
                  width="10"
                  height="8"
                  transform="translate(6 7)"
          />
          <rect
                  class="body1"
                  width="12"
                  height="6"
                  transform="translate(5 8)"
          />
          <rect
                  class="body2"
                  width="10"
                  height="6"
                  transform="translate(6 8)"
          />
          <rect
                  class="body2"
                  width="8"
                  height="6"
                  transform="translate(7 7)"
          />
          <rect
                  class="stains"
                  width="4"
                  height="1"
                  transform="translate(7 13)"
          />
          <rect
                  class="stains"
                  width="2"
                  height="1"
                  transform="translate(8 12)"
          />
          <rect
                  class="stains"
                  width="2"
                  height="1"
                  transform="translate(6 9)"
          />
          <rect
                  class="stains"
                  width="3"
                  height="1"
                  transform="translate(6 8)"
          />
          <rect
                  class="stains"
                  width="3"
                  height="1"
                  transform="translate(7 7)"
          />
          <rect
                  class="stains"
                  width="1"
                  height="1"
                  transform="translate(14 7)"
          />
        </g>
        <g class="ears" transform="translate(52)">
          <rect width="1" height="3" transform="translate(10 5)" />
          <rect width="1" height="3" transform="translate(15 5)" />
        </g>
        <g class="snout">
          <rect
                  class="snout1"
                  width="5"
                  height="3"
                  transform="translate(13 10)"
          />
          <rect
                  class="snout-holes"
                  width="1"
                  height="3"
                  transform="translate(17 11) rotate(90)"
          />
          <rect
                  class="snout2"
                  width="1"
                  height="1"
                  transform="translate(16 11) rotate(90)"
          />
        </g>
        <g class="eyes">
          <rect width="1" height="1" transform="translate(12 9)" />
          <rect width="1" height="1" transform="translate(15 9)" />
        </g>
      </g>
    </svg>
  </div>
  <span class="loader-text">Loading...</span>
  <div class="background-container">
    <div class="stars"></div>
  </div>
</main>
<!-- partial -->
</body>
</html>
